<template>
	<view>
		<!-- 状态栏 -->
		<view class="status" :style="{ position: headerPosition }"></view>
		<view class="header" :style="{ position: headerPosition }">
			<!-- <view class="addr"><view class="icon location"></view>{{city}}</view> -->
			<view class="input-box" @tap="toSearch()">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" disabled />
				<view class="icon search"></view>
			</view>
			<!-- <view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg"></view>
			</view> -->
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<scroll-view class="topClass" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view
				:style="{ color: categoryid == item.id ? colors.color : '', borderColor: colors.color }"
				:class="categoryid == item.id ? 'lists' : ''"
				v-for="(item, index) in listData"
				:key="index"
				@click="setScroll(index, item)"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<view class="category-list">
			<!-- 左侧分类导航 -->
			<scroll-view scroll-y="true" class="left" scroll-with-animation>
				<view
					class="row"
					v-for="(category, index) in categoryList"
					:key="category.id"
					:class="[index == showCategoryIndex ? 'on' : '']"
					@tap="showCategory(category, index)"
				>
					<view class="text" :style="{ color: index == showCategoryIndex ? colors.color : '' }">
						<view class="block" :style="{ background: colors.color }"></view>
						{{ category.title }}
					</view>
				</view>
			</scroll-view>
			<!-- 右侧子导航 -->
			<scroll-view scroll-y="true" class="right" scroll-with-animation @scrolltolower="getMore">
				<view style="overflow: hidden;" v-if="goodsList.length !== 0">
					<view class="list_s" v-for="(item, index) in goodsList" :key="index">
						<image :src="item.img" @tap="jumpDetail(item)"></image>
						<view class="goods_right">
							<p class="p1" @tap="jumpDetail(item)">
								<image :src="item.tag_img" mode="" v-if="item.tag_type == 2"></image>
								<text class="hot" v-if="item.tag_type == 1" :style="{ backgroundColor: colors.color }">{{ item.tag_content }}</text>
								<text class="name">{{ item.title }}</text>
							</p>
							<p class="p2">
								<text class="text1">累计{{ item.sales }}份</text>
								<text style="margin: 0 10upx;">|</text>
								<text class="text2" :style="{ color: colors.color }">剩余{{ item.inventory }}份</text>
							</p>
							<p class="p3" v-if="item.is_activity == 1">
								<text class="text1" :style="{ color: colors.color }">¥{{ item.activity_price || 0 }}</text>
								<!-- <text class="text2">¥{{item.price}}</text> -->
							</p>
							<p class="p3" v-else>
								<text class="text1" :style="{ color: colors.color }">¥{{ item.price || 0 }}</text>
								<!-- <text class="text2">¥{{item.price}}</text> -->
							</p>
							<!-- 如果商品不存在商品规格 可以直接添加到购物车-->
							<view style="overflow: hidden;" v-if="item.is_option == 0">
								<view class="step" v-if="!item.show" @click="setStep(item)"><text :style="{ background: colors.color }">+</text></view>
								<view class="step" v-if="item.show == true">
									<view class="number">
										<view class="sub" @tap.stop="subs(item)"><view class="icon jian"></view></view>
										<view class="input"><input type="number" disabled v-model="item.count" maxlength="2" /></view>
										<view class="add" :style="{ background: colors.color }" @tap.stop="adds(item)"><view class="icon jia"></view></view>
									</view>
								</view>
							</view>
							<!-- 如果商品存在商品规格 点击弹出规格弹窗 -->
							<view class="sku_btn" @tap="setSku(item)" v-else :style="{ background: colors.color }">选规格</view>
						</view>
					</view>
					<p style="font-size: 24upx;color: #666666;text-align: center;padding-bottom: 20upx;">已无更多~</p>
				</view>
				<view class="nodatas" v-else>
					<image src="../../../static/img/home/notdata.png" mode=""></image>
					<p>暂 无 商 品</p>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="sku_box">
				<p class="title">添加到购物车</p>
				<scroll-view scroll-y="true" class="sku_scroll">
					<!-- 第一层 -->
					<view class="lists" v-for="(item, n) in sku" :key="n">
						<p class="sku_name">{{ item.title }}</p>
						<view class="list_box">
							<p
								v-for="(item1, index) in item.goods_spec_item"
								:key="index"
								@click="setSkuList(item1.item_title, n, index)"
								:style="{ color: subIndex[n] == index ? colors.color : '', borderColor: subIndex[n] == index ? colors.color : '' }"
								v-bind:class="[item1.isShow ? '' : 'noneActive', subIndex[n] == index ? 'productActive' : '']"
							>
								{{ item1.item_title }}
							</p>
						</view>
					</view>
				</scroll-view>
				<view class="price_box">
					<p class="kucun">库存：{{ kucun }}</p>
					<view class="number">
						<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
						<view class="input" @tap.stop="discard"><input type="number" disabled v-model="number" @input="sum" /></view>
						<view class="add" :style="{ background: number < kucun ? colors.color : '#f2f2f2' }" @tap.stop="add(row)"><view class="icon jia"></view></view>
					</view>
					<p class="p1">
						<text class="text1">已选规格：</text>
						<text class="text2" v-if="item" v-for="(item, index) in selectArr" :key="index">{{ item }}</text>
					</p>
					<view class="bottom">
						<p class="left">￥{{ numprice || 0 }}</p>
						<p class="right" :class="[kucun == 0 ? 'noactive' : '']" @tap="addCartOption">加入购物车</p>
					</view>
				</view>
			</view>
			<image src="../../../static/img/close.png" mode="" @tap="close" class="close"></image>
		</uni-popup>
	</view>
</template>
<script>
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import { getCateId,removeCateId, getColorCofig } from '../../../static/utils/ahth.js';
import uniPopup from '../../../components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniNumberBox,
		uniPopup
	},
	data() {
		return {
			colors: {},
			count: 1,
			skuData: [],
			twoData: [],
			thereData: [],
			number: 1,
			current: 0,
			selectArr: [],
			categoryid: '',
			showCategoryIndex: 0,
			headerPosition: 'fixed',
			current1: 0,
			scrollLeft: 0,
			city: '北京',
			listData: [],
			//分类列表
			categoryList: [],
			pageIndex: 1,
			pageSize: 10,
			goodsList: [],
			haveSku: false,
			goodid: '',
			sku: [],
			subIndex: [],
			skuAllData: [],
			shopItemInfo: {}, //存放要和选中的值进行匹配的数据
			ids: '',
			kucun: 0,
			price: 0,
			optionId: '',
			numprice: ''
		};
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	onShow() {
		this.colors = getColorCofig();
		// this.showCategoryIndex = 0;
		if (getCateId()) {
			this.showCategoryIndex = 0;
			this.categoryid = getCateId();
			this.getClass();
			removeCateId()
		}
		for(var i = 0; i< this.goodsList.length; i++){
			let data = this.goodsList[i]
			if(data.count){
				this.goodsList[i].count = ''
				this.goodsList[i].show = false
			}
		}
	},
	onLoad() {
		console.log(this.categoryid);
		this.getClass();
	},
	methods: {
		//消息列表
		toMsg() {
			uni.navigateTo({
				url: '../../msg/msg'
			});
		},
		//分类切换显示
		showCategory(item, index) {
			this.showCategoryIndex = index;
			this.pageIndex = 1;
			this.goodid = item.id;
			this.getgoodsList(item.id);
		},
		toCategory(e) {
			uni.setStorageSync('catName', e.name);
			// uni.navigateTo({
			// 	url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
			// });
			this.$Router.push({
				path: '/pages/goods/goods-list/goods-list',
				query: {
					cid: e.id,
					name: e.name
				}
			});
		},
		/**
		 * @param setSkuList 选择规格
		 * @param checkItem 对规格进行筛选 只显示当前选中的
		 * @param initializeData 对规格数据进行处理
		 */
		setSkuList(item, n, index) {
			//设置规格的选中
			console.log(item, n, index);
			// this.shows = true;
			console.log(this.selectArr)
			if (this.selectArr[n] != item) {
				this.$set(this.selectArr, n, item);
				this.$set(this.subIndex, n, index);
			} else {
				this.$set(this.selectArr, n, '');
				this.$set(this.subIndex, n, -1); //去掉选中颜色
			}
			this.checkItem(n);
		},
		checkItem(clickIndex) {
			//对规格进行筛选 如果不符合要求的规格不能选择
			var option = this.sku;
			console.log(option)
			var x = '';
			for (let i = 0; i < option.length; i++) {
				//遍历规格列表
				// if (i == clickIndex) {
				// 	continue;
				// }
				let len2 = option[i].goods_spec_item.length;
				console.log('执行了', len2)
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.sku[i].goods_spec_item[j].item_title);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					let data = this.selectArr.join('_') || this.selectArr[0];
					console.log(this.selectArr)
					this.skuAllData.forEach(e => {
						if (e.title == data) {
							this.kucun = Number(e.inventory);
							this.price = e.price;
							this.numprice = e.price;
							this.optionId = e.option_id;
							console.log(e);
						}
					});
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', true);
					} else {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', false);
					}
				}
			}
		},
		initializeData() {
			//计算有多小种可选路径
			console.log('执行了');
			let result = this.skuAllData.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.title.split('_').reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		//搜索跳转
		toSearch() {
			this.$Router.push({
				path: '/pagesA/pages/home/search'
			});
		},
		setScroll(index, item) {
			if (index == 1 || index == 2) {
				this.scrollLeft = 0;
			} else {
				this.scrollLeft = index * 40;
			}
			this.categoryid = item.id;
			this.showCategoryIndex = 0
			console.log(item);
			this.getClassList(item.id);
		},
		setStep(item) {
			let show;
			if (item.show && item.show !== '') {
				show = true;
				this.$set(item, 'show', show);
				this.adds(item);
			} else {
				this.$set(item, 'show', true);
				this.adds(item);
			}
		},
		adds(item) {
			let count;
			this.request('cart/addCart', {
				goods_id: item.id
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					if (item.count && item.count !== '') {
						count = item.count + 1;
						this.$set(item, 'count', count);
					} else {
						this.$set(item, 'count', 1);
					}
				}
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.$set(item, 'show', '');
				}
			});
		},
		subs(item) {
			if (item.count == 0) {
				return;
			}
			this.request('cart/decCart', {
				goods_id: item.id
			}).then(res => {
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
				if (res.code == 200) {
					console.log(res);
					let count = item.count - 1;
					this.$set(item, 'count', count);
				}
			});
		},
		sub(item) {
			//减少商品
			if (this.number == 1) {
				return;
			} else {
				this.number--;
				this.numprice = this.number * this.price;
			}
		},
		add(item) {
			//增加商品到购物车
			if (this.kucun == 0) {
				return;
			}
			if (this.number >= this.kucun) {
				return;
			}
			this.number++;
			this.numprice = this.number * this.price;
		},
		jumpDetail(item) {
			//商品详情
			let type = 0
			if(item.is_activity == 1){
				type = 3
			}
			console.log()
			this.$Router.push({
				path: '/pagesA/pages/goods/goodsDetails',
				query: {
					goodid: item.id,
					type: type
				}
			});
		},
		addCartOption() {
			//有规格的添加购物车
			this.request('cart/addCart', {
				goods_id: this.ids,
				option_id: this.optionId,
				num: this.number
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加购物车成功!'
					});
					this.close();
				}
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		getClass() {
			//获取列表
			this.request('common/getCategoryList', {}).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.listData = res.data;
					if (!this.categoryid) {
						//如果没有传值 默认选择第一项
						this.categoryid = this.listData[0].id;
					} else {
						for (var i = 0; i < this.listData.length; i++) {
							let list = this.listData[i];
							if (list.id == this.categoryid) {
								if (i == 1 || i == 2) {
									this.scrollLeft = 0;
								} else {
									this.scrollLeft = i * 40;
								}
							}
						}
					}
					if (this.categoryid !== '') {
						this.getClassList(this.categoryid);
					} else {
						this.getClassList(this.listData[0].id);
					}
				}
			});
		},
		getClassList(pid) {
			//获取二级菜单
			this.categoryList = [];
			this.request('common/getCategoryList', {
				pid: pid,
				is_recommend: 0
			}).then(res => {
				console.log('二级菜单', res);
				this.goodsList = [];
				if (res.code == 200) {
					this.categoryList = res.data;
					this.pageIndex = 1;
					this.getgoodsList(res.data[0].id);
					this.goodid = res.data[0].id;
				}
			});
		},
		getgoodsList(id) {
			//获取商品列表
			this.request('goods/getGoodsList', {
				cid: id,
				page: this.pageIndex,
				psize: this.pageSize
			}).then(res => {
				console.log(res);
				this.pageIndex = 1;
				this.goodsList = res.data;
			});
		},
		getMore() {
			//加载更多
			console.log('加载更多');
			this.pageIndex++;
			this.request('goods/getGoodsList', {
				cid: this.goodid,
				page: this.pageIndex,
				psize: this.pageSize
			}).then(res => {
				console.log(res);
				if(res.code == 200){
					this.goodsList = this.goodsList.concat(res.data);
				}
			});
		},
		setSku(item) {
			//选择商品规格
			if(item.inventory == 0){
				uni.showToast({
					title:'库存不足~',
					icon:'none'
				})
				return
			}
			console.log(item);
			this.selectArr = [];
			this.shopItemInfo = {};
			this.subIndex = [];
			this.price = 0;
			this.kucun = 0;
			this.ids = item.id;
			this.getSkuAll(item);
			this.getSkuList(item);
			setTimeout(() => {
				uni.hideTabBar();
			}, 200);
			this.$refs.popup.open();
		},
		getSkuList(item) {
			//获取商品的规格
			this.request('goods/getGoodsSpecs', {
				goods_id: item.id
			}).then(res => {
				console.log(res);
				this.sku = res.data;
				this.checkItem(-1);
			});
		},
		getSkuAll(item) {
			//获取商品的所有规格信息 方便匹配对比
			this.request('goods/getGoodsOption', {
				goods_id: item.id,
				type: 0
			}).then(res => {
				console.log(res);
				this.skuAllData = res.data;
				console.log(this.skuAllData);
				this.initializeData();
			});
		},
		close() {
			setTimeout(() => {
				uni.showTabBar();
			}, 200);
			this.$refs.popup.close();
		}
	}
};
</script>
<style lang="scss" scoped>
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #fff;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}

.header {
	width: 92%;
	padding: 0 4%;
	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */

	.addr {
		width: 120upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		font-size: 28upx;
		.icon {
			height: 60upx;
			margin-right: 5upx;
			display: flex;
			align-items: center;
			font-size: 42upx;
			color: #ffc50a;
		}
	}
	.input-box {
		width: 100%;
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;
		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}
		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
		}
	}
	.icon-btn {
		width: 60upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		.icon {
			width: 60upx;
			height: 60upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 42upx;
		}
	}
}
.place {
	background-color: #ffffff;
	height: 100upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.category-list {
	width: 100vw;
	background-color: #fff;
	display: flex;
	overflow: hidden;
	.left,
	.right {
		position: absolute;

		top: 180upx;
		/*  #ifdef  APP-PLUS  */
		top: calc(100upx + var(--status-bar-height));
		/*  #endif  */
		bottom: 0upx;
	}
	.left {
		width: 24%;
		left: 0upx;
		background-color: #f2f2f2;
		.row {
			width: 100%;
			height: 90upx;
			display: flex;
			align-items: center;
			transition: all 0.3s;
			.text {
				width: 100%;
				position: relative;
				font-size: 28upx;
				display: flex;
				justify-content: center;
				color: #999999;
				.block {
					position: absolute;
					width: 0upx;
					left: 0;
				}
			}
			&.on {
				height: 100upx;
				background-color: #fff;
				transition: all 0.3s;
				.text {
					font-size: 28upx;
					font-weight: 600;
					// color: #f23a3a;
					.block {
						width: 4upx;
						height: 80%;
						// border-radius: 5upx;
						top: 10%;
						left: 5upx;
						// background-color: #f23a3a;
					}
				}
			}
		}
	}
	.right {
		width: 76%;
		left: 24%;
		.category {
			width: 94%;
			padding: 20upx 3%;
			.banner {
				width: 100%;
				height: 24.262vw;
				border-radius: 10upx;
				overflow: hidden;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);
				image {
					width: 100%;
					height: 24.262vw;
				}
			}
			.list {
				margin-top: 40upx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.box {
					width: calc(71.44vw / 3);
					margin-bottom: 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					image {
						width: 60%;
						height: calc(71.44vw / 3 * 0.6);
					}
					.text {
						margin-top: 5upx;
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 26upx;
					}
				}
			}
		}
	}
}
.topClass {
	height: 80upx;
	line-height: 80upx;
	overflow: hidden;
	z-index: 999;
	display: flex;
	overflow-x: scroll;
	white-space: nowrap; /*不换行*/
	padding-left: 30upx;
	box-sizing: border-box;
	view {
		display: inline-block;
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-right: 44upx;
		transition: all 0.3s;
		height: 79upx;
		line-height: 79upx;
	}
	.lists {
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		transition: all 0.3s;
		position: relative;
		font-weight: bold;
		border-bottom: 4upx solid #ff0000;
		// &:after {
		// 	content: '';
		// 	position: absolute;
		// 	height: 4rpx;
		// 	background-color: #ff0000;
		// 	bottom: 5upx;
		// 	left: 50%;
		// 	transform: translateX(-50%);
		// 	width: 8vw;
		// }
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	// overflow: hidden;
	height: 200upx;
	width: 540upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-sizing: border-box;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 25upx;
	border-radius: 10upx;
	position: relative;
	margin-left: 20upx;
	image {
		width: 150upx;
		height: 150upx;
		border-radius: 10upx;
		float: left;
		margin-right: 20upx;
		z-index: 20;
	}
	.goods_right {
		position: relative;
		// overflow: hidden;
		z-index: 10;
		.sku_btn {
			height: 45upx;
			font-size: 22upx;
			color: #eeeeee;
			background-color: pink;
			line-height: 45upx;
			position: absolute;
			right: 0;
			bottom: -20upx;
			padding: 0 15upx;
			font-weight: bold;
			border-radius: 15upx;
			transition: all 0.3;
			&:active {
				opacity: 0.8;
			}
		}
	}
	.step {
		overflow: hidden;
		position: absolute;
		right: -10upx;
		bottom: -20upx;
		text {
			font-size: 32upx;
			color: #ffffff;
			background-color: #ff0000;
			display: block;
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			text-align: center;
			line-height: 40upx;
		}
		/deep/.uni-numbox {
			height: 45upx;
			line-height: 40upx;
			width: auto;
			.uni-numbox__minus,
			.uni-numbox__value,
			.uni-numbox__plus {
				height: 40upx;
				line-height: 30upx;
				border: none;
				background-color: #ff0000;
				border-radius: 50%;
				width: 40upx;
				text {
					color: #ffffff;
				}
			}
			.uni-numbox__minus {
				background-color: #ddd !important;
				text {
					background-color: #ddd !important;
				}
			}
			.uni-numbox__value {
				width: 50upx;
				background-color: #fff;
				color: #333;
			}
		}
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 50upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		image {
			width: 40upx;
			height: 40upx;
			float: left;
			margin-right: 10upx;
		}
		.hot {
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #ffffff;
			background-color: #f23a3a;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
		}
		.name {
		}
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			// color: #f23a3a;
		}
	}
	.p3 {
		.text1 {
			font-size: 32upx;
			// color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(100, 100, 100, 1);
		}
	}
}
.number {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	.input {
		width: 50upx;
		height: 50upx;
		margin: 0 10upx;
		// background-color: #f3f3f3;
		input {
			width: 50upx;
			height: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 26upx;
		}
	}
	.sub,
	.add {
		width: 40upx;
		height: 40upx;
		background-color: #f2f2f2;
		border-radius: 50%;
		.icon {
			font-size: 22upx;
			width: 40upx;
			height: 40upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
		}
	}
	.add {
		// background-color: #ff0000;
	}
	.sub {
		.icon {
			color: #b3b3b3;
		}
	}
}
.sku_box {
	width: 90vw;
	min-height: 60vh;
	overflow: hidden;
	background-color: #fff;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 30upx;
	.title {
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		height: 60upx;
	}
	.sku_scroll {
		height: 50vh;
		overflow: hidden;
		.lists {
			overflow: hidden;
			margin-bottom: 20upx;
			.sku_name {
				color: #999999;
				font-size: 28upx;
			}
			.list_box {
				overflow: hidden;
				p {
					float: left;
					height: 45upx;
					line-height: 45upx;
					padding: 0 30upx;
					border: 1upx solid #eeeeee;
					font-size: 24upx;
					border-radius: 15upx;
					margin-right: 20upx;
					margin-top: 20upx;
					transition: all 0.3s;
				}
			}
		}
	}
}
.close {
	height: 80upx;
	width: 80upx;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.price_box {
	// height: 10vh;
	.number {
		display: flex;
		float: right;
		overflow: hidden;
		.input {
			width: 50upx;
			height: 50upx;
			margin: 0 10upx;
			// background-color: #f3f3f3;
			input {
				width: 50upx;
				height: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}
		.sub,
		.add {
			width: 40upx;
			height: 40upx;
			background-color: #f2f2f2;
			border-radius: 50%;
			.icon {
				font-size: 22upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
		}
		.add {
			background-color: #ff0000;
		}
		.sub {
			.icon {
				color: #b3b3b3;
			}
		}
	}
	.p1 {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		.text1 {
			color: #999999;
			font-size: 24upx;
		}
		.text2 {
			color: #333333;
			margin-right: 10upx;
			font-size: 24upx;
		}
	}
	.bottom {
		height: 80upx;
		margin-top: 30upx;
		.left {
			font-size: 40upx;
			color: #f9493d;
			float: left;
			margin-top: 20upx;
		}
		.right {
			float: right;
			padding: 10upx 20upx;
			background-color: #ffd25f;
			color: #333;
			margin-top: 20upx;
			border-radius: 15upx;
		}
		.noactive {
			float: right;
			padding: 10upx 20upx;
			background-color: #ccc;
			opacity: 0.4;
			color: #333;
			pointer-events: none;
			margin-top: 20upx;
			border-radius: 15upx;
		}
	}
}
.noneActive {
	//规格禁用
	background-color: #ccc;
	opacity: 0.4;
	color: #000;
	pointer-events: none;
}
.productActive {
	border: 1upx solid #1a1a29;
}
.kucun {
	color: #999999;
	font-size: 24upx;
	margin-bottom: 5upx;
}
.nodatas {
	image {
		width: 160upx;
		height: 160upx;
		display: block;
		margin: 0 auto;
		margin-top: 60upx;
	}
	p {
		text-align: center;
		color: #999999;
		font-size: 24upx;
		margin: 10upx;
	}
}
</style>
